<template>
	<view class="container">
		<view class="header-section">
			<view class="img">
				<image src='/static/chenggong.png'></image>
			</view>
			<view class="tit">会员开通成功</view>
			<view class="row">
				<text class="left">支付方式</text>
				<text class="pay-type">{{paymentInfo.trade_type}}</text>
			</view>
			<view class="row">
				<text class="left">支付金额</text>
				<text class="pay-price">￥{{paymentInfo.payAmount}}</text>
			</view>
		</view>
		<view class="footer-section">
			<view class="s-title">请确认以下收货地址，赠送商品邮寄到你家</view>
			<view class="content">
				<view class="tis" v-if="!address.id">
					<view class="img">
						<image mode="widthFix" src="/static/icon_dizhi.png"></image>暂无收货地址
					</view>
					<view class="btn" @tap="add">
						新增地址
					</view>
				</view>
				<view class="center" v-else>
					<view class="b01">
						<view class="c01">
							<view class="name">{{address.name}}</view>
							<view class="tel">{{address.telephone}}</view>
						</view>
						<text class="yticon icon-you" @tap="toAddressList"></text>
					</view>
					<view class="address-detail">

						<text>{{address.region}}</text><text class='detailed'>{{address.detailAddress}} </text>
						<!-- <span>{{address.province}}-{{address.city}}</span> <span class='detailed'>{{address.district}}{{address.street1}}</span> -->
					</view>
				</view>
			</view>
			<view class="confirm" @tap="confirm">确认</view>
			<view class="text">可在订单中心查看物流信息</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				paymentInfo: {
					'trade_type': '微信支付',
					'payAmount': 0.00
				},
				address: {
					id: '',
					name: '牧耘郎',
					phoneNumber: '150****8888',
					addressName: '南山区',
					address: '广东省深圳市',
					area: '科兴科学园 腾讯大厦 2栋 B单元 36层 302',
					default: false,
				},
				gif_order: '',
				type: null // type 1为购物车创建订单， 2立即下单  3,购买会员 4.代理商购买
			}
		},
		onLoad(options) {
			uni.removeStorage({
				key: 'selectAddress'
			});
			switch (options.payType) {
				case "1":
					this.paymentInfo.trade_type = '微信支付';
					break
				case "2":
					this.paymentInfo.trade_type = '支付宝支付';
					break
			}
			this.gif_order = options.orderId;
			this.type = options.type;
			//加载订单详情及用户收货地址
			this.loadData();

		},
		onShow() {
			var address = uni.getStorageSync('selectAddress');
			if (address) {
				address.region = address.province + address.city + address.district;
				address.detailAddress = address.street1;
				this.address = address;
			}

		},
		onBackPress(options){ //监听物理返回键
			if(options.from === 'backbutton') return true;
		},
		methods: {
			async loadData() {
				var _this = this;
				var params = {
					id: _this.gif_order,//会员礼品订单号
					type: 0 //0默认为主订单、1为子订单
				}
				let result = await Api.apiCall('post', Api.order.orderDetail, params);
				//收货地址不需传入参
				let data = await Api.apiCall('post', Api.goods.listAddress, params);
				if (data.length > 0) {
					//确诊收货地址优先默认选择用户默认收货地址，其次为其它收货地址;
					var item_default = data.find(item =>
						item.is_default == 1
					);
					var item_not_default = data.find(item =>
						item.is_default == 0
					);
					var address = item_default? item_default:item_not_default;
					if (address) {
						address.region = address.province + address.city;
						address.telephone = address.telephone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
						address.detailAddress = address.district + address.street1;
						this.address = address;
					}
				}
				if(result)
				{
					this.paymentInfo.payAmount = result.pay_amount;
				}
			},
			add() {
				// uni.navigateTo({
				// 	url: "/pages/user/addressEdit?type=add"
				// })
				uni.navigateTo({
					url: "/pages/user/address"
				})
			},
			async confirm() {
				if (!this.address.id) {
					uni.showToast({
						title: '请新增收货地址',
						icon: "none"
					});
					return false;
				}
				let params = {
					'order_id': this.gif_order,
					'address_id': this.address.id
				}
				let data = await Api.apiCall('post', Api.vip.address, params);
				if (data) {
					uni.showToast({
						title: '确认成功',
						icon: 'none'
					});
					// type 1为购物车创建订单， 2立即下单  3,购买会员 4.代理商购买
					let url = '/member/myMembership';
					if(this.type == 4){
						console.log('即将跳转至 memberCenter页面');
						url = '/member/memberCenter';
					}
					setTimeout(function() {
						uni.redirectTo({
							url: url
						});
					}, 1000)
				}
			},
			toAddressList() {
				uni.navigateTo({
					url: "/pages/user/address"
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background-color: #FAFAFA;
	}

	.header-section {
		width: 100%;
		height: 608upx;
		padding: 108upx 0 100upx;
		display: flex;
		flex-wrap: wrap;
		background-color: #FFF;

		.img {
			width: 100%;
			margin-bottom: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 200upx;
				height: 120upx;
			}
		}

		.tit {
			width: 100%;
			height: 88upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $font-sm + 8upx;
			color: #313333;
		}

		.row {
			width: 100%;
			height: 44upx;
			margin-top: 18upx;
			display: flex;
			flex-direction: row;
			color: #ABADAD;
			font-size: $font-sm + 4upx;
			align-items: center;

			text {
				width: 50%;
				display: flex;
			}

			.left {
				padding-right: 20upx;
				justify-content: flex-end;
			}

			.pay-type {
				justify-content: flex-start;
				font-weight: 600;
				color: #313332;
			}

			.pay-price {
				justify-content: flex-start;
				padding-left: 10upx;
				font-weight: 600;
				font-size: 36upx;
				color: #E52631;
			}
		}

	}

	.footer-section {
		width: 100%;
		height: 616upx;
		background-color: #FFF;
		margin-top: 20upx;
		padding: 0 30upx;

		.s-title {
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #232323;
			font-size: $font-sm;
		}

		.content {
			height: 198upx;
			border-radius: 10upx;
			background-color: #F0F3F5;

			.tis {
				width: 100%;
				padding: 14upx 0 28upx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.img {
					width: 100%;
					height: 88upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ABADAD;
					font-size: $font-sm + 2upx;

					image {
						width: 18upx;
						height: 24upx;
						margin-right: 10upx;
					}

				}

				.btn {
					width: 188upx;
					height: 64upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 34upx;
					color: #313332;
					font-size: $font-sm + 4upx;
					border: 1upx solid #767778;
				}
			}

			.center {
				width: 100%;
				flex-wrap: wrap;
				padding: 0 30upx 0 20upx;

				.b01 {
					width: 100%;
					height: 88upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					color: #313332;
					font-size: $font-sm + 4upx;

					.c01 {
						display: flex;
						flex-direction: row;
						font-size: 32upx;

						.tel {
							margin-left: 72upx;
						}
					}

					.yticon {
						display: flex;
						justify-content: flex-end;
					}
				}

				.address-detail {
					width: 100%;
					line-height: 44upx;
					display: -webkit-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 26upx;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* overflow: hidden; */
					color: #ABADAD;

					.detailed {

						margin-left: 30upx;
					}
				}
			}
		}

		.confirm {
			width: 100%;
			height: 88upx;
			margin-top: 70upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44upx;
			background-color: #FFBC21;

		}

		.text {
			width: 100%;
			height: 72upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $font-sm;
			color: #ACADAE;
		}
	}
</style>
